import React, { memo } from "react";
import { useDispatch, useSelector } from "react-redux";
import { addNumberAction, subNumberAction } from "./store/modules/counter";

const App = memo((props) => {
  /**
   * useSelector 返回一个对象,映射state 数据
   */
  const { count } = useSelector((state) => {
    return {
      count: state.counter.count,
    };
  });
  // 获取dispatch
  const dispatch = useDispatch();
  function changNumberHandle(num, isAdd = true) {
    if (isAdd) {
      dispatch(addNumberAction(num));
    } else {
      dispatch(subNumberAction(num));
    }
  }
  return (
    <div>
      <h1>App:{count}</h1>
      <p>
        <button onClick={(e) => changNumberHandle(1)}>+1</button>
        <button onClick={(e) => changNumberHandle(5, false)}>+1</button>
      </p>
    </div>
  );
});

export default App;
